* { box-sizing: border-box }

:root {
	--neutral-custom: 207, 100%;
	--neutral-custom-l: 39%;
	--neutral: hsl(var(--neutral-custom), var(--neutral-custom-l));
	--neutral-dark: hsl(var(--neutral-custom), calc(var(--neutral-custom-l) * .85));

	--error-custom: 0, 100%;
	--error-custom-l: 33%;
	--error: hsl(var(--error-custom), var(--error-custom-l));
	--error-dark: hsl(var(--error-custom), calc(var(--error-custom-l) * .75));

	--success-custom: 145, 55%;
	--success-custom-l: 42%;
	--success: hsl(var(--success-custom), var(--success-custom-l));
	--success-dark: hsl(var(--success-custom), calc(var(--success-custom-l) * .75));
}

*:not(.select) {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.select {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

@font-face {
	font-family: Inter;
	src: url('/fonts/Inter-VariableFont_slnt,wght.ttf');
}

html, body {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1a1a1a;
}

body {
	margin: 0;
	color: #fff;

	font-family: Inter;
	font-weight: 400;
	word-wrap: break-word;
	-webkit-font-kerning: normal;
	font-kerning: normal;
	-ms-font-feature-settings: "kern","liga","clig","calt";
	font-feature-settings: "kern","liga","clig","calt";
	text-rendering: optimizeLegibility;
	font-size: .9em;
}

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 5px;
}
a.color {
	color: #46b0ff;
}
a.nostyle {
	text-decoration: none !important;
}

body, .hide-scroll {
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
body::-webkit-scrollbar, .hide-scroll::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

.icon, .icon + *, .icon ~ * {
	vertical-align: middle;
}

.tippy-box {
	background-color: #0F0F0F !important;
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
	font-size: .9em !important;
}
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
	border-top-color: #0F0F0F !important;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: #0F0F0F !important;
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
	border-left-color: #0F0F0F !important;
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
	border-right-color: #0F0F0F !important;
}
.tippy-content {
	white-space: pre-line;
}

.tag {
	position: relative;
	color: black;
	padding: 2px;
	padding-right: 13px;
	padding-left: 5px;
	font-size: 11px;
	z-index: 1;
	display: inline-block;
	line-height: initial;
	text-transform: lowercase;
}
.tag::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 9px;
	border-color: transparent transparent transparent #fff;
	-webkit-transform: rotate(360deg);
}
.tag::before {
	content: '';
	position: absolute;
	top: 0;
	right: 9px;
	width: calc(100% - 9px);
	height: 100%;
	background-color: #fff;
	z-index: -1;
}
.tag:not(:last-child) {
	margin-right: .4rem;
}

.icon-button {
	cursor: pointer;
	background: #313131;
	box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 40%);
	border-radius: 4px;
	padding: .9rem;
}
.icon-button > .icon {
	opacity: .3;
	transition: opacity .1s;
}
.icon-button:hover > .icon {
	opacity: 1;
}

.tag.addon { color: #fff !important }
.tag.addon::before { background-color: #006cc7 !important }
.tag.addon::after { border-left-color: #006cc7 !important }

.tag.weapon { color: #fff !important }
.tag.weapon::before { background-color: #8c0101 !important }
.tag.weapon::after { border-left-color: #8c0101 !important }

.tag.servercontent { color: #fff !important }
.tag.servercontent::before { background-color: #000 !important }
.tag.servercontent::after { border-left-color: #000 !important }

.tag.fun { color: #fff !important }
.tag.fun::before { background-color: #368c01 !important }
.tag.fun::after { border-left-color: #368c01 !important }

.tag.roleplay { color: #000 !important }
.tag.roleplay::before { background-color: #00d4d4 !important }
.tag.roleplay::after { border-left-color: #00d4d4 !important }

.tag.realism { color: #fff !important }
.tag.realism::before { background-color: #8400d6 !important }
.tag.realism::after { border-left-color: #8400d6 !important }

.tag.vehicle { color: #fff !important }
.tag.vehicle::before { background-color: #5d3131 !important }
.tag.vehicle::after { border-left-color: #5d3131 !important }

.tag.movie { color: #fff !important }
.tag.movie::before { background-color: #47ab94 !important }
.tag.movie::after { border-left-color: #47ab94 !important }

.tag.cartoon { color: #fff !important }
.tag.cartoon::before { background-color: #642865 !important }
.tag.cartoon::after { border-left-color: #642865 !important }

.tag.scenic { color: #000 !important }
.tag.scenic::before { background-color: #fb9e9e !important }
.tag.scenic::after { border-left-color: #fb9e9e !important }

.tag.water { color: #fff !important }
.tag.water::before { background-color: #4754ab !important }
.tag.water::after { border-left-color: #4754ab !important }

.tag.comic { color: #fff !important }
.tag.comic::before { background-color: #642865 !important }
.tag.comic::after { border-left-color: #642865 !important }

.tag.build { color: #fff !important }
.tag.build::before { background-color: #3e6e79 !important }
.tag.build::after { border-left-color: #3e6e79 !important }

.tag.tool { color: #fff !important }
.tag.tool::before { background-color: #b98528 !important }
.tag.tool::after { border-left-color: #b98528 !important }

.tag.gamemode { color: #000 !important }
.tag.gamemode::before { background-color: #88cc86 !important }
.tag.gamemode::after { border-left-color: #88cc86 !important }

.tag.map { color: #fff !important }
.tag.map::before { background-color: #804100 !important }
.tag.map::after { border-left-color: #804100 !important }

.tag.npc { color: #000 !important }
.tag.npc::before { background-color: #fdfa8e !important }
.tag.npc::after { border-left-color: #fdfa8e !important }

.tag.effects { color: #000 !important }
.tag.effects::before { background-color: #27c500 !important }
.tag.effects::after { border-left-color: #27c500 !important }

.tag.model { color: #fff !important }
.tag.model::before { background-color: #80007c !important }
.tag.model::after { border-left-color: #80007c !important }
